<template>
  <header class="vpt-base-header-1002" :style="headerStyle">
    <div class="vpt-left" :style="leftStyle">
      <div class="title" :style="titleStyle">
        <!-- {{ systemName }} -->
      </div>
    </div>
    <div class="vpt-center" :style="buttonViewStyle">
      <tabNavButton
        :buttonGroup="buttonGroup"
        :active="active"
        :activeMinWidth="activeMinWidth"
        :layoutHeight="layoutHeight"
        :buttonStyle="buttonStyle"
        @handleMenu="handleMenu"
      ></tabNavButton>
    </div>
    <!-- <div class="vpt-right" :style="rightStyle">
      <vptDistTime :timeStyle="timeStyle" :iconStyle="iconStyle"></vptDistTime>
    </div> -->
  </header>
</template>
<script setup>
import { ref } from "vue";
import config from "@/config";
import tabNavButton from "@/components/tab-nav-button";
import vptDistTime from "@/components/form/vpt-dist-time/index.vue";

const systemName = ref(config.systemName);
const props = defineProps({
  buttonGroup: {
    type: Array,
    default: () => [],
  },
  active: {
    type: Number,
    default: 0,
  },
  activeMinWidth: {
    type: String,
    default: "0.6rem",
  },
  headerStyle: {
    type: Object,
    default: () => {
      return {
        height: "0.72rem",
        // "background-image": `url(${require("@/assets/img/theme2/header-bg.png")})`,
      };
    },
  },
  leftStyle: {
    type: Object,
    default: () => {
      return {
        width: "5.2rem",
        height: "0.72rem",
      };
    },
  },
  titleStyle: {
    type: Object,
    default: () => {
      return {
        fontSize: "0.32rem",
        lineHeight: "0.7rem",
        textShadow: "0 2rem 7rem #006aff",
      };
    },
  },
  layoutHeight: {
    type: String,
    default: () => {},
    return: "",
  },
  buttonViewStyle: {
    type: Object,
    default: () => {
      return {};
    },
  },
  buttonStyle: {
    type: Object,
    default: () => {
      return {
        width: "2.5rem",
        fontSize: "0.25rem",
        height: "0.5rem",
        marginRight: "0.2rem",
        padding: "0 0.15rem",
      };
    },
  },
  timeStyle: {
    type: Object,
    default: () => {
      return {};
    },
  },
  iconStyle: {
    type: Object,
    default: () => {
      return {};
    },
  },
  rightStyle: {
    type: Object,
    default: () => {
      return {
        right: "0.4rem",
        top: "0.16rem",
      };
    },
  },
});

const handleMenu = (item) => {
  // console.log("item", item);
  emit("handleMenu", item);
};

const emit = defineEmits(["changeTab"]);
</script>
<style lang="less" scoped>
.vpt-base-header-1002 {
  height: 0.72rem;
  width: 100%;
  display: flex;
  background-image: url("../../assets/img/theme3/header-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  .vpt-center {
    margin: 0 auto;
    padding-top: 0.1rem;
  }
  .vpt-left {
    width: 4.32rem;
    background-image: url("../../assets/img/theme3/title.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;

    .title {
      font-family: HarmonyOS_SansSC_Medium;
      font-weight: 500;
      font-size: 0.32rem;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      line-height: 0.7rem;
      text-shadow: 0 2rem 7rem #006aff;
    }
  }
  .vpt-right {
    position: absolute;
    right: 0.4rem;
    top: 0.1rem;
  }
}
</style>
